<template>
  <div class="productContainer">
    <div class="styleOne" v-for="(item,k) in list" :key="k">
      <div class="productImages" :style="`background-image:url(${item.backgrond})`"></div>
      <div class="productInfor">
        <div class="itemLeft"><span class="shopName" :style="`background-image:url(${item.imgrond})`"></span></div>
        <div class="itemCenter">
          <div class="taoShou" @click="giveFather(item.name)">{{item.name}}</div>   <!-- 1.注册事件,包括拿到值过来 -->
         
          <div class="fenShi">{{item.fen}}</div>
        </div>
        <div class="itemRight">
          <div class="dianZan">
            <span>★</span>666666
          </div>
          <div class="timeHistory">2分钟前</div>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  data() {
    return {
        
    }
  },
  props:{ //3、我来接收从父亲组件拿回来的数据 使用props接收！！！
    list: {    //4、申明下这种数据的类型 这个lists属性就是父组件绑定的:lists 属性名，不能写错了，不然拿不到了！！
        type:Array 
    }
  },
  methods:{
    giveFather(data){ //2.添加事件的方法 data就是item.name的值 并且发布出来
        this.$emit("getData",data)  //3.发布出来this.$emit是固定的写法,第一个参数是发布信息代号的名字驼峰法则,第二个参数是data一样的函数表达式
    }
  }
};
</script>

<style lang="less" scoped>
.productContainer {
  margin-top: 0.2rem;
  height: 4rem;
//   border: 1px solid red;
//   width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .styleOne {
      padding: 0.1rem 0; 
      width: 49%;
  }
  .productImages {
    width: 100%;
    height: 3rem;
    // border: 1px solid blue;
    background: url("../../assets/images/hotproducts/1.jpg") no-repeat center left;
    background-size: 100% 100%;
    // background-size: cover;//这个不好因为图片会显示不全
  }
  .productInfor {
    display: flex;
    width: 100%;
    height: 1rem;
    // border: 1px solid green;
    .itemLeft,
    .itemCenter,
    .itemRight {
      flex: 1;
      // border: 1px solid gold;
    }
    .itemLeft {
        text-align: center;
      .shopName{
        margin-top: 0.08rem;
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;  
        background: url("../../assets/images/hotproducts/2.jpg") no-repeat center center;
        background-size: 100% 100%;
        // background-position: center;
        // background-size: cover; //这个不好因为图片会显示不全
        border-radius: 100%;
      }  
      
    }
    .itemCenter {
      text-align: center;
      .taoShou {
        font-size: 0.26rem;
        color: #303030;
        font-weight: bold;
        margin-top: 0.1rem;
      }
      .fenShi {
        font-size: 0.12rem;
        color: #666;
        text-align: center;
      }
    }
    .itemRight {
      .dianZan {
        margin-top: 0.1rem;
        text-align: center;
        color: #666;
        span {
          display: inline-block;
          width: 0.2rem;
          height: 0.4rem;
          font-size: 0.12rem;
        }
      }
      .timeHistory {
        font-size: 0.12rem;
        text-align: center;
      }
    }
  }
}
</style>